<template>
    <div>
        <span class="fh" @click="deleteFh">返回</span>
        <div class="fhxx">
            <h3>房号信息</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="单元名称" prop="unitname" width="500">
                    <el-input v-model="ruleForm.unitname"></el-input>
                </el-form-item>
                <el-form-item label="幢号" prop="buildnum" width="500">
                    <el-input v-model="ruleForm.buildnum"></el-input>
                </el-form-item>
                <el-form-item label="楼层数" prop="storeynum" width="500">
                    <el-input v-model="ruleForm.storeynum"></el-input>
                </el-form-item>
                <el-form-item label="房号" prop="homenum" width="500">
                    <el-input v-model="ruleForm.homenum"></el-input>
                </el-form-item>
                <el-form-item label="住客姓名" prop="homename" width="500">
                    <el-input v-model="ruleForm.homename" @focus="dialogVisible = true"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="homestatus">
                    <el-select v-model="ruleForm.homestatus" placeholder="请选择">
                        <el-option v-for="(item, index) in homestatus" :key="index" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-tooltip class="item" effect="dark" :content="content" placement="top">
                    <i class="el-icon-warning"></i>
                </el-tooltip>
                <el-form-item label="房屋信息" prop="homemessage" class="dxk">
                    <el-input type="textarea" v-model="ruleForm.homemessage"></el-input>
                </el-form-item>
                <el-tooltip class="item" effect="dark" :content="content" placement="top">
                    <i class="el-icon-warning"></i>
                </el-tooltip>
                <el-form-item label="家庭成员" prop="homesuggestion" class="dxk">
                    <el-input type="textarea" v-model="ruleForm.homesuggestion"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="znsb">
            <h3>智能设备</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="洗衣机数量" prop="washnum" width="500">
                    <el-input v-model="ruleForm.washnum"></el-input>
                </el-form-item>
                <el-form-item label="WI-FI名称" prop="wifiname" width="500">
                    <el-input v-model="ruleForm.wifiname"></el-input>
                </el-form-item>
                <el-form-item label="空调数量" prop="airnum" width="500">
                    <el-input v-model="ruleForm.airnum"></el-input>
                </el-form-item>
                <el-form-item label="智能设备状态" prop="smartstatus">
                    <el-select v-model="ruleForm.smartstatus" placeholder="请选择">
                        <el-option v-for="(item, index) in smartstatus" :key="index" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="jjsb">
            <h3>家居设备</h3>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                <el-form-item label="书桌数量" prop="homedesk" width="500">
                    <el-input v-model="ruleForm.homedesk"></el-input>
                </el-form-item>
                <el-form-item label="椅子数量" prop="homechair" width="500">
                    <el-input v-model="ruleForm.homechair"></el-input>
                </el-form-item>
                <el-form-item label="衣橱数量" prop="homeclothes" width="500">
                    <el-input v-model="ruleForm.homeclothes"></el-input>
                </el-form-item>
                <el-form-item label="家居设备状态" prop="familystatus">
                    <el-select v-model="ruleForm.familystatus" placeholder="请选择">
                        <el-option v-for="(item, index) in familystatus" :key="index" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-button @click="handleBc" size="mini" type="success" class="czan">保存</el-button>
            <el-button @click="deleteFh" size="mini" type="primary" class="czan">返回</el-button>
        </div>
        <!-- 模态框 -->
        <el-dialog title="住客姓名" :visible.sync="dialogVisible" width="50%">
            <el-radio v-model="radio" label="1">自定义</el-radio>
            <el-radio v-model="radio" label="2">复制</el-radio>
            <el-input v-if="radio == 1" v-model="xmcontent"></el-input>
            <div v-if="radio == 2">
                <div class="ssk">
                    <el-input v-model="username" placeholder="请输入用户账号"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="getMtkDataList">搜索</el-button>
                </div>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="id" label="ID" width="180">
                    </el-table-column>
                    <el-table-column prop="username" label="用户账号" width="180">
                    </el-table-column>
                    <el-table-column prop="homeaddress" label="家庭地址">
                    </el-table-column>
                    <el-table-column prop="type" label="类型">
                        <template slot-scope="prop">
                            <span v-if="prop.row.type = 1">普通用户</span>
                            <span v-else>管理员</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cz" label="操作">
                        <template slot-scope="prop">
                            <el-button type="success" plain size="mini" @click="handleTj(prop.row, prop.index)"
                                class="el-icon-circle-plus"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="pagination" width="300">
                    <el-pagination @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next, jumper"
                        :page-size='pageNum' :current-page="currPage" :page-sizes="[5, 10, 20, 50]" :total="total"
                        background @size-change="handleSizeChange">
                    </el-pagination>
                </div>
                <h3 class="yxjg">已选结果</h3>
                <el-table :data="tableNbData" border style="width: 100%">
                    <el-table-column prop="id" label="ID" width="180">
                    </el-table-column>
                    <el-table-column prop="username" label="用户账号" width="180">
                    </el-table-column>
                    <el-table-column prop="homeaddress" label="家庭地址">
                    </el-table-column>
                    <el-table-column prop="type" label="类型">
                        <template slot-scope="prop">
                            <span v-if="prop.row.type = 1">普通用户</span>
                            <span v-else>管理员</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cz" label="操作">
                        <template slot-scope="prop">
                            <el-button type="danger" plain size="mini" @click="handleNb(prop.row)"
                                class="el-icon-remove"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="getName" v-if="radio == 1">确 定</el-button>
                <el-button type="primary" @click="getNbName" v-if="radio == 2">选 择</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 选项
            radio: '1',
            xmcontent: '',
            tableData: [],
            tableNbData: [],
            username: '',
            currPage: 1,
            pageNum: 7,
            total: 0,
            // 模态框
            dialogVisible: false,
            type: this.$route.query.type,
            id: this.$route.query.editId,
            nbName:'',
            ruleForm: {
                unitname: '',
                id: this.id,
                buildnum: '',
                storeynum: '',
                homenum: '',
                homename: '',
                homestatus: '',
                homemessage: '',
                homesuggestion: '',
                washnum: '',
                wifiname: '',
                airnum: '',
                smartstatus: '',
                homedesk: '',
                homechair: '',
                familystatus: '',
                homeclothes: '',
                h_id: this.id
            },
            familystatus: [
                {
                    value: 1,
                    label: '完好'
                },
                {
                    value: 2,
                    label: '待维修'
                }
            ],
            homestatus: [
                {
                    value: 1,
                    label: '已入住'
                },
                {
                    value: 2,
                    label: '未入住'
                }
            ],
            smartstatus: [
                {
                    value: 1,
                    label: '完好'
                },
                {
                    value: 2,
                    label: '待维修'
                }
            ],
            rules: {
                unitname: [
                    { required: true, message: '单元名称不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                buildnum: [
                    { required: true, message: '幢号不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                storeynum: [
                    { required: true, message: '楼层数不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homenum: [
                    { required: true, message: '房号不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homename: [
                    { required: true, message: '住客姓名不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homestatus: [
                    { required: true, message: '状态不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homemessage: [
                    { required: true, message: '房屋信息不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homesuggestion: [
                    { required: true, message: '家庭成员不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                washnum: [
                    { required: true, message: '洗衣机数量不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                wifiname: [
                    { required: true, message: 'WI-FI名称不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                airnum: [
                    { required: true, message: '空调数量不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                smartstatus: [
                    { required: true, message: '智能设备状态不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homedesk: [
                    { required: true, message: '书桌数量不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homeclothes: [
                    { required: true, message: '衣橱数量不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                homechair: [
                    { required: true, message: '椅子数量不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                familystatus: [
                    { required: true, message: '家居设备状态不能为空', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
            },
            content: '可填写房屋的详细信息介绍：1.房屋的基本信息2.房屋的成员信息3.房屋的设备信息4.房屋未来的规划填报'
        };
    },
    created() {
        this.getDataList(),
            this.getMtkDataList()
    },
    methods: {
        // 获取数据列表
        async getDataList() {
            let res = await this.$axiosToken({
                url: '/house/getDetailId',
                method: 'get',
                data: { id: this.id },
                success: (nb) => {
                    this.ruleForm = nb[0]
                }
            })
        },
        // 获取模态框列表
        async getMtkDataList() {
            let res = await this.$axiosToken({
                url: '/users/getUserList',
                method: 'get',
                data: {
                    username: this.username,
                    currPage: this.currPage - 1,
                    pageNum: this.pageNum
                },
                success: (nb) => {
                    this.tableData = nb.data
                    this.total = nb.total
                }
            })
        },
        // 绿色加号
        handleTj(row) {
            this.tableNbData.push(row)
            if(this.tableNbData.length > 1){
                this.$notify({
                title: '提示',
                message: '目前admin 已录入房屋信息，请勿重复操作,',
                type: 'warning'
            })
                this.tableNbData.splice(1,1)
            }
            this.nbName = row.username
        },
        // 红色减号
        handleNb(row, index) {
            this.tableNbData.splice(index, 1)
        },
        // 分页导航
        handleCurrentChange(val) {
            this.currPage = val;
            this.getMtkDataList();
        },
        handleSizeChange(val) {
            this.currPage = 1;
            this.pageNum = val;
            this.getMtkDataList();
        },
        // 更改姓名
        getName() {
            this.ruleForm.homename = JSON.parse(JSON.stringify(this.xmcontent))
            this.dialogVisible = false
        },
        getNbName() {
            this.dialogVisible = false
            this.ruleForm.homename = this.nbName
            this.tableNbData = []
        },
        // 返回
        deleteFh() {
            this.$router.go(-1)
        },
        // 保存
        async handleBc() {
            if (this.ruleForm.communityname == '' || this.ruleForm.unitnum == '' || this.ruleForm.unitname == '' || this.ruleForm.unitstatus == '') {
                this.$message({
                    type: 'error',
                    message: '录入信息不能为空!'
                });
            } else {
                let res = await this.$confirm('确认提交信息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    this.$axiosToken({
                        url: '/house/updatenumList',
                        method: 'post',
                        data: this.ruleForm,
                    })
                    this.$router.push('/house/number')
                })
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style scoped>
.fh {
    color: skyblue;
    cursor: pointer;
}

.ssk {
    display: flex;
}

.yxjg {
    padding: 0;
    border: none;
}

h3 {
    padding-left: 10px;
    border-left: 4px solid #20a0ff;
    margin: 30px 20px;
}

i {
    color: skyblue;
}

::v-deep .pagination {
    width: 100px !important;
}

::v-deep .pagination .el-input__inner {
    width: 100px;
}

::v-deep .el-form {
    display: flex;
    flex-wrap: wrap;
    width: 96%;
    margin-left: 20px;
}

.dxk {
    width: 97% !important;
}

::v-deep .el-form-item {
    width: 47%;
    padding-left: 3%;

}

::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 18px;
}

::v-deep .el-input__inner {
    width: 620px;
}
</style>